<template>
	<view class="container">
		<header-view type="all"></header-view>
		<scroll-view scroll-y @scrolltolower="scrollBottom" class="content">
			<totalAssets :type="activeNav" :info="ordersy"></totalAssets>
			<view class="nav flex">
				<view class="nav_item" :class="activeNav==index?'active_nav':''" v-for="(item,index) in list"
					@tap="changeNav(index)">
					<text>{{item}}</text>
					<view class="inner"></view>
				</view>
			</view>
			<view class="list">
				<view class="no_data flex" @tap="toBuy" v-if="activeNav==0">
					<image src="../../static/img/no_data.png" mode=""
						style="width: 44rpx;height: 44rpx;margin-right: 16rpx;"></image>
					{{$t('立即参与公开认购')}}
				</view>
				<view class="new_list" v-if="activeNav==0">
					<view class="list_item" v-for="(item,index) in newList">
						<view class="item_header flex_between">
							<view class="item_title">{{item.name}}
								<text class="item_code">{{item.code}}</text>
							</view>
							<view class="item_status" v-if="item.renjiao_btn==1" @tap="openMask(item)">
								{{$t('前往确认认缴')}}
							</view>
							<view class="item_status" v-else>
								{{item.status_str}}
							</view>
						</view>
						<view class="detail flex_between">
							<view class="detail_item">
								<view class="name">{{$t('价格')}}</view>
								<view class="data">{{item.price}}</view>
							</view>
							<view class="detail_item">
								<view class="name">{{$t('中签数量')}}</view>
								<view class="data">{{item.middle_number}}</view>
							</view>
							<view class="detail_item">
								<view class="name">{{$t('申购数量')}}</view>
								<view class="data">{{item.number}}</view>
							</view>
						</view>
						<view class="detail flex_between">
							<view class="detail_item">
								<view class="name">{{$t('认缴金额')}}</view>
								<view class="data">{{item.middle_renjiao}}</view>
							</view>
							<view class="detail_item">
								<view class="name">{{$t('申请时间')}}</view>
								<view class="data">{{item.createtime}}</view>
							</view>
							<view class="detail_item">
								<view class="name">{{$t('市价')}}</view>
								<view class="data">{{item.renjiao}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="stock_list" v-else>
					<view class="list_item" v-for="(item,index) in stockList">
						<view class="item_header flex_between">
							<view class="item_title">
								{{item.pro_name}}
								<text class="item_code">{{item.pro_code}}</text>
							</view>
							<view class="item_status">
								{{item.status_str}}
							</view>
						</view>
						<view class="detail_box flex">
							<view class="detail_item">
								<view class="detail_title">{{$t('购买记录')}}</view>
								<view class="d_item">
									<view class="name">{{$t('购入数量')}}</view>
									<view class="detail">{{item.buy_zhang}}</view>
								</view>
								<view class="d_item">
									<view class="name">{{$t('购入价格')}}</view>
									<view class="detail">{{item.buyprice}}</view>
								</view>
								<view class="d_item">
									<view class="name">{{$t('手续费')}}</view>
									<view class="detail">{{item.buy_commission}}</view>
								</view>
								<view class="d_item">
									<view class="name">{{$t('购入市值')}}</view>
									<view class="detail">{{item.market_value}}</view>
								</view>
								<view class="d_item">
									<view class="name">{{$t('购入时间')}} </view>
									<view class="detail">{{item.createtime}}</view>
								</view>
							</view>
							<view class="detail_item last_item" :class="item.gain>0?'green':'red'">
								<view class="detail_title">{{$t('最新记录')}}</view>
								<view class="d_item">
									<view class="name">{{$t('持仓数量')}}</view>
									<view class="detail">{{item.buy_zhang}}</view>
								</view>
								<view class="d_item">
									<view class="name">{{$t('最新价格')}}</view>
									<view class="detail">{{item.price}}</view>
								</view>
								<view class="d_item">
									<view class="name">{{$t('最近涨幅')}}</view>
									<view class="detail">{{item.gain}}%</view>
								</view>
								<view class="d_item">
									<view class="name">{{$t('最新市值')}}</view>
									<view class="detail">{{item.new_market_value}}</view>
								</view>
								<view class="d_item">
									<view class="name">{{$t('最新收益')}}</view>
									<view class="detail">{{item.gain_price}}</view>
								</view>
							</view>
						</view>
						<view class="buttons flex_between" v-if="activeNav==1">
							<view class="button active_btn" @tap="toDetail(item)">{{$t('购买详情')}}</view>
							<view class="button" :class="item.sale_btn==1?'active_btn':''"
								@tap="item.sale_btn==1?sale(item,index):''">{{$t('卖出')}}</view>
							<view class="button" :class="item.cancel_btn==1?'active_btn':''"
								@tap="item.cancel_btn==1?cancel(item,index):''">{{$t('取消订单')}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-modal :show="show" :title="$t('提示？')" :content="$t('是否确认认缴')" :confirmText="$t('确认')" :cancelText="$t('取消')"
			showCancelButton confirmColor="#4c3d89" cancelColor="#e9e9f5" @cancel="show=false"
			@confirm="toRenjiao"></u-modal>
		<tab-view id="3"></tab-view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import tabView from "@/components/tabView/tabView.vue"
	import totalAssets from "@/components/totalAssets.vue"
	import {
		myNewStockListApi,
		renjiaoApi,
		stockOrderListApi,
		cancelOrderApi,
		saleOrderApi,
		ordersyApi
	} from "@/api/api.js"
	export default {
		components: {
			tabView,
			headerView,
			totalAssets
		},
		data() {
			return {
				list: [this.$t('已订阅'), this.$t('进行中'), this.$t('已售出')],
				activeNav: 0,
				newList: [],
				page: 1,
				total: 0,
				show: false,
				chooseNewStock: {},
				stockList: [],
				ordersy: {}
			};
		},
		onShow() {
			this.page = 1
			this.activeNav = 0
			this.getNewList()
			this.getOrdersy()
		},
		methods: {
			getOrdersy() {
				ordersyApi().then(res => {
					this.ordersy = res.data.data
				})
			},
			scrollBottom() {
				if (this.activeNav == 0) {
					if (this.total == this.newList.length) {
						return
					}
					this.page++
					this.getNewList()
				} else {
					if (this.total == this.stockList.length) {
						return
					}
					this.page++
					this.getStockOrderList()
				}
			},
			getNewList() {
				myNewStockListApi({
					page: this.page
				}).then(res => {
					console.log(res.data.data)
					this.total = res.data.data.total
					if (this.page == 1) {
						this.newList = res.data.data.data
					} else {
						this.newList = [...this.newList, ...res.data.data.data]
					}

				})
			},
			getStockOrderList() {
				stockOrderListApi({
					page: this.page,
					status: this.activeNav
				}).then(res => {
					this.total = res.data.data.total
					if (this.page == 1) {
						this.stockList = res.data.data.data
					} else {
						this.stockList = [...this.stockList, ...res.data.data.data]
					}
				})
			},
			changeNav(key) {
				if (this.activeNav == key) {
					return
				}
				this.page = 1
				this.activeNav = key
				this.newList = []
				this.stockList = []
				if (this.activeNav == 0) {
					this.getNewList()
				} else {
					this.getStockOrderList()
				}
			},
			toBuy() {
				uni.navigateTo({
					url: "/pages/newShare/newShare"
				})
			},
			openMask(opt) {
				this.show = true
				this.chooseNewStock = opt
			},
			toRenjiao() {
				let data = {
					id: this.chooseNewStock.id
				}
				renjiaoApi(data).then(res => {
					uni.$u.toast(res.data.msg)
					this.page = 1
					this.getNewList()
					this.show = false
				})
			},
			sale(opt, index) {
				saleOrderApi({
					id: opt.id
				}).then(res => {
					uni.$u.toast(res.data.msg)
					this.page = 1
					this.stockList = []
					this.getStockOrderList()
				})
			},
			cancel(opt, index) {
				cancelOrderApi({
					id: opt.id
				}).then(res => {
					uni.$u.toast(res.data.msg)
					this.page = 1
					this.stockList = []
					this.getStockOrderList()
				})
			},
			toDetail(opt) {
				console.log(opt)
				uni.navigateTo({
					url: "/pages/deal/detail?id=" + opt.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;

		.content {
			flex: 1;
			overflow: auto;
			background: #0a0b24;
			padding: 0 24rpx;

			.nav {
				height: 80rpx;
				background: #10112b;
				margin: 32rpx 0 0;

				font-weight: 400;
				color: #a4a4af;

				.nav_item {
					flex: 1;
					text-align: center;
					position: relative;
					height: 100%;
					font-size: 28rpx;
					line-height: 80rpx;

					.inner {
						position: absolute;
						left: 50%;
						bottom: 0;
						width: 46rpx;
						height: 8rpx;
						background: transparent;
						border-radius: 4rpx;
						transform: translateX(-50%);
					}
				}

				.active_nav {
					color: #9984dc;

					.inner {
						background: #9984dc;
					}
				}
			}

			.is_scroll {
				position: fixed;
				top: calc(var(--status-bar-height) + 180rpx);
				left: 0;
				z-index: 999;
				width: 100%;
			}

			.list {
				.no_data {
					background: #121330;
					border-radius: 40rpx;
					margin: 60rpx 0 0;
					font-size: 32rpx;
					font-weight: 400;
					color: #9984dc;
					padding: 20rpx;
				}

				.new_list {
					.list_item {
						border-bottom: 5px solid #151630;

						.item_header {
							width: 100%;
							height: 126rpx;
							font-size: 34rpx;
							font-weight: 400;
							color: #e9e9f5;

							.item_title {
								width: 70%;

								.item_code {
									height: 30rpx;
									line-height: 30rpx;
									background: #c62f1f;
									padding: 0 10rpx;
									font-size: 20rpx;
									font-weight: 400;
									color: #fff;
									margin-left: 20rpx;
								}
							}

							.item_status {
								height: 60rpx;
								line-height: 56rpx;
								border: 2rpx solid #fff;
								// background: rgba(93, 9, 9, .43);
								border-radius: 12rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #fff;
								padding: 0 20rpx;
								white-space: nowrap;
							}
						}

						.detail {
							.detail_item {
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: center;
								flex-direction: column;
								height: 164rpx;

								.name {
									font-size: 28rpx;
									font-weight: 400;
									color: rgba(226, 221, 242, .48);
								}

								.data {
									font-size: 28rpx;
									font-weight: 400;
									color: #e2ddf2;
									margin-top: 26rpx;
									white-space: nowrap;
								}
							}
						}
					}
				}

				.stock_list {
					.list_item {
						border-bottom: 5px solid #151630;

						.item_header {
							height: 112rpx;
							border-bottom: 1rpx solid #151630;
							padding: 0 26rpx;

							.item_title {
								flex: 1;
								font-size: 34rpx;
								font-weight: 400;
								color: #e9e9f5;

								.item_code {
									height: 30rpx;
									line-height: 30rpx;
									background: #c62f1f;
									padding: 0 10rpx;
									font-size: 20rpx;
									font-weight: 400;
									color: #fff;
									margin-left: 20rpx;
								}
							}

							.item_status {
								height: 46rpx;
								border: 1rpx solid #8a2f2f;
								background: rgba(93, 9, 9, .43);
								border-radius: 12rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #bd1717;
								padding: 0 20rpx;
							}
						}

						.detail_box {
							.detail_item {
								flex: 1;
								margin-right: 60rpx;

								.detail_title {
									height: 110rpx;
									line-height: 110rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: #4c3d89;
								}

								.d_item {
									width: 100%;
									display: flex;
									align-items: center;
									justify-content: space-between;
									height: 62rpx;

									.name {
										font-size: 24rpx;
										font-weight: 400;
										color: #f0eff3;
									}

									.detail {
										font-size: 24rpx;
										font-weight: 400;
										color: #f3b953;
									}
								}
							}

							.last_item {
								margin-right: 0;
							}

							.red {
								.detail {
									color: #f53e3e !important;
								}
							}

							.green {
								.detail {
									color: #53b15f !important;
								}
							}
						}

						.buttons {
							height: 180rpx;

							.button {
								width: calc(33.3333333333% - 10rpx);
								height: 80rpx;
								border: 2rpx solid #4c3d89;
								border-radius: 40rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: hsla(0, 0%, 100%, .26);
								display: flex;
								align-items: center;
								justify-content: center;
								margin: 0 4rpx;
							}

							.active_btn {
								border: 2px solid #4c3d89;
								background: #4c3d89;
								color: hsla(0, 0%, 100%, .86);
							}
						}
					}
				}
			}
		}

		/deep/.u-popup__content {
			background: #12132d !important;

			.u-modal__title {
				color: #e9e9f5;

			}

			.u-modal__content__text {
				color: #e9e9f5;
			}
		}
	}
</style>